<template>
    <div class="discover-page hasfooter">
        <!--<div id="mescroll" class="mescroll hasfooter">-->
            <!--<div class="mescroll-bounce">-->
                <!--<div class="wrapper">-->
                    <search @search="search"></search>
                    <div class="nav">
                        <div class="single">
                            <router-link :to="{name:'columns'}" class="iconfont">
                                <svg class="icon" aria-hidden="true">
                                　　<use xlink:href="#icon-qizhiye-zhuanlan"></use>
                            　　</svg>
                            </router-link>
                            <div>付费读</div>
                        </div>
                        <div class="single">
                            <router-link :to="{name:'activities'}" class=" iconfont ">
                                <svg class="icon" aria-hidden="true">
                                　　<use xlink:href="#icon-qizhiye-huodong"></use>
                            　　</svg>
                            </router-link>
                            <div>活动</div>
                        </div>
                    </div>
                    <router-link class="block-head" :to="{name:'columns'}" v-if="columnList">
                        <div class="title">付费读</div>
                        <div class="more">更多</div>
                    </router-link>
                    <single-list :list='columnList'></single-list>
                    <router-link class="block-head" :to="{name:'activities'}"  v-if="activityList">
                        <div class="title">推荐活动</div>
                        <div class="more">更多</div>
                    </router-link>
                    <activity-list :list='activityList'></activity-list>
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <z-footer></z-footer>
    </div>
</template>

<script>
    import {appService} from '../../service/appService'
    import {actService} from '../../service/activityService'
    import activitylist from '../../component/list/activity-list.vue'
    import singlelist from '../../component/list/column-list.vue'
    import searchbtn from '../../component/common/search.vue'

    export default {
        components: {'activity-list':activitylist,'single-list':singlelist,'search':searchbtn },
        metaInfo () {
            // console.log(this);
            const title = '运联传媒'
            return {
                title,
                meta: [
                    { vmid: 'description', name: 'description', content: '运联传媒' },
                    { vmid: 'keyWords', name: 'keyWords', content: '运联'},
                ]
            }
        },
        data () {
            return {
                count:1
            }
        },
        asyncData({store,route}) {
            function getactivities(){
                let page = {pageNo:1,pageSize:2,sortKey:'sortNumber'}
                return actService.getactivities(page).then(function(res) {
                    store.state.homeStore.activityList = res.data.datas.datas
                })
            }
            function getcolumns(){
                let page = {pageNo:1,pageSize:2,queryType:3}
                return actService.getcolumns(page).then(function(res) {
                    store.state.homeStore.columnList = res.data.datas.datas
                })
            }
            return Promise.all([
                getactivities(),getcolumns()
            ])

        },
        computed: {
            //将存在store中的数据取出
            activityList:{
                // getter
                get: function () { return this.$store.state.homeStore.activityList || []},
                // setter
                set: function (newValue) {return newValue}
            },
            columnList:{
                // getter
                get: function () { return this.$store.state.homeStore.columnList || []},
                // setter
                set: function (newValue) {return newValue}
            }
        },
        mounted: function() {
            let that = this
//            that.getList()
            appService.getWxJssdk().then(function () {
                appService.getWxShare({hasGet:true},'运联传媒')
            })
        },
        methods: {
            //搜索，带关键字跳转搜索页
            search:function (v) {
                let that = this
                that.$router.replace({name:'search',params:{type:1,query:v}})
            },
            //获取列表
            getList:function () {
                let that = this
                let store = that.$store
                let param = {pageNo:1,pageSize:2,sortKey:'actEndTime'}
                actService.getactivities(param).then(function(res){
                    if(!res.data || !res.data.datas) return
                    store.state.homeStore.activityList=res.data.datas.datas
                })
                let page = {pageNo:1,pageSize:2,queryType:3}
                actService.getcolumns(page).then(function(res){
                    if(!res.data || !res.data.datas) return
                    store.state.homeStore.columnList=res.data.datas.datas
                })
            },
        }
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");
    .discover-page{
        background:#f8f8f8;
        .nav{
            display:flex;
            padding:.7467rem 1.8rem 5px;
            background:#fff;
            .single{
                flex:1;
                text-align: center;
                line-height: .9333rem;
                .iconfont{
                    font-size: .5333rem;
                    text-align: center;
                    line-height: 1.0667rem;
                }
                .icon{
                    display: inline-block;
                    width: 1.0667rem;
                    height: 1.0667rem;
                    color: #20a0ff;
                    background: #fff;
                }
            }
        }
        .block-head {
            margin-top: .2667rem;
            background:  #fff;
            padding: 0 .4rem;
            line-height: 1.3333rem;
            display:block;
            .title {
                display:  inline-block;
                font-size: .48rem;
                font-weight: 600;
                color: #333;
            }
            .more {
                float:  right;
                font-size: .3733rem;
                color: #666;
            }
        }
    }

</style>
